<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>入库管理</el-breadcrumb-item>
      <el-breadcrumb-item>接货管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-main>
        <!-- 查询表单 -->
        <el-form
          :inline="true"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-form-item prop="warehousingno">
            <el-input
              v-model="searchForm.warehousingno"
              placeholder="采购单号"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="receiveno">
            <el-input
              v-model="searchForm.receiveno"
              placeholder="接货单号"
              style="width: 180px"
            ></el-input>
          </el-form-item>

          <el-form-item prop="state">
            <el-select
              v-model="searchForm.state"
              placeholder="接货状态"
              style="width: 180px"
            >
              <el-option label="入库中" value="0"></el-option>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已审核" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh" @click="resetForm"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="onCheck"
              >审核</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-close" @click="cancelCheck"
              >撤销审核</el-button
            >
          </el-form-item>
        </el-form>

        <!--调拨信息表-->
        <el-table
          ref="warehousingTable"
          :data="warehousingData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"> </el-table-column>
          <el-table-column prop="warehousingno" label="入库单号" sortable>
          </el-table-column>
          <el-table-column prop="receiveno" label="接货单号" sortable>
          </el-table-column>
          <el-table-column prop="locatorcode" label="货位编码" sortable>
          </el-table-column>
          <el-table-column prop="state" label="状态" sortable>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 5px"
                @click="deleteBtn"
                >删除</el-button
              >
              <el-button
                @click="inputDetail"
                type="primary"
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 5px"
                >录入明细</el-button
              ><!--根据state条件隐藏显示按钮-->

              <el-button
                type="primary"
                size="mini"
                v-if="scope.row.state != 2"
                style="padding: 5px"
                @click="checkDetail"
                >查看明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 录入明细模态框 -->
        <el-dialog title="盘点明细" :visible.sync="dialogInputVisible">
          <!-- 录入明细模态框表单 -->
          <div style="margin-left: 130px">
            <el-form :model="dialogform" :rules="rules" ref="dialogform">
              <el-form-item
                label="入库单号"
                :label-width="formLabelWidth"
                prop="warehousingno"
                aria-readonly="true"
              >
                <el-input
                  v-model="dialogform.warehousingno"
                  style="width: 250px; margin: 0px"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商品编码"
                :label-width="formLabelWidth"
                prop="commoditybar"
              >
                <el-select
                  v-model="dialogform.commoditybar"
                  placeholder="请输入商品编码"
                  style="width: 250px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="数量"
                :label-width="formLabelWidth"
                prop="qty"
              >
                <el-input
                  v-model="dialogform.qty"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label-width="115px">
                <el-button type="primary" @click="addBtn" icon="el-icon-plus"
                  >新增</el-button
                >
                <el-button type="danger" @click="clear" icon="el-icon-delete"
                  >清除</el-button
                >
                <el-button type="warning" @click="endBtn" icon="el-icon-check"
                  >结束</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <!-- 录入明细模态框表格 -->
          <div>
            <el-table :data="dialogInputData" border>
              <el-table-column
                property="commoditybar"
                label="商品编码"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="commodityname"
                label="商品名称"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="qty"
                label="数量"
                sortable=""
              ></el-table-column>
            </el-table>
          </div>
        </el-dialog>

        <!-- 查看明细模态框 -->
        <el-dialog title="查看明细" :visible.sync="dialogResultVisible">
          <!-- 查看明细模态框表格 -->
          <div>
            <el-table :data="dialogResultData" border>
              <el-table-column
                property="commoditybar"
                label="商品编码"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="commodityname"
                label="商品名称"
                sortable=""
              ></el-table-column>
              <el-table-column
                property="qty"
                label="数量"
                sortable=""
              ></el-table-column>
            </el-table>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        receiveno: "",
        warehousingno: "",
        state: "",
      },
      warehousingData: [{ allocationno: 12324 }],
      multipleSelection: [],

      currentPage: 1,
      pagesize: 10,
      total: 0,

      rules: {
        locatorcode: [
          { required: true, message: "货位编码不能为空", trigger: "change" },
        ],
        commoditybar: [
          { required: true, message: "商品编码不能为空", trigger: "change" },
        ],
        qty: [{ required: true, message: "数量不能为空", trigger: "change" }],
      },

      dialogInputVisible: false,
      dialogInputData: [],

      dialogResultVisible: false,
      dialogResultData: [],

      dialogform: {
        warehousingno: "",
        commoditybar: "",
        qty: "",
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    inputDetail() {
      this.dialogInputVisible = true;
    },

    checkDetail() {
      this.dialogResultVisible = true;
    },
  },
};
</script>

<style scoped>
</style>